import {Component, EventEmitter, Output, Input} from '@angular/core';
import $ from "jquery";
import {ClientFilterWayModel} from "../../../../model/pages/client/client-list/client.model";
import {Events} from "ionic-angular";

@Component({
    selector: 'client-filter-tool',
    templateUrl: 'client-filter.component.html'
})
export class ClientFilterComponent {

    sortWayList;
    public currentOption;
    $clientListFilterItemPanel;
    $clientFilterWrapper;
    _isUnfold = false;
    set isUnfold(v: boolean) {
        this.scrollOffOn(!v);
        this._isUnfold = v;
    }

    get isUnfold(): boolean {
        return this._isUnfold;
    }

    clientFilterWrapper = 'client-filter-wrapper';
    selectorClass = 'client-list-filter-item-panel';
    selectedIndex = -1;
    searchKeyword;
    @Output() selectChanged;
    @Input() way: ClientFilterWayModel;
    @Output() searched;
    public static instance;

    constructor(private events: Events) {
        this.sortWayList = [
            {
                name: "姓名",
                value: "name" //name VIP totalPolicy premium acceptTime
            },
            {
                name: "尊享会会员等级",
                value: "VIP"
            },
            {
                name: "受理日期",
                value: "acceptTime"
            },
            {
                name: "保单数",
                value: "totalPolicy"
            },
            {
                name: "年缴保费",
                value: "premium"   //年缴保费(个险列表) | 当期应缴保费(VIP列表) | 理赔申请金额(理赔客户列表)
            }
        ];
        this.currentOption = this.sortWayList[0];
        this.selectChanged = new EventEmitter<any>();
        ClientFilterComponent.instance = this;
        this.searched = new EventEmitter<any>();
    }

    ngOnInit() {
        this.sortWayInit();
        let self = this;
        this.events.subscribe('menu open', this.openMenuCb);
    }

    destroy() {
        this.$clientListFilterItemPanel = $(`.${this.selectorClass}`);
        if (this.$clientListFilterItemPanel && this.$clientListFilterItemPanel.length) {
            this.$clientListFilterItemPanel.remove();
        }
        this.scrollOffOn(true);
        this.events.unsubscribe('menu open', this.openMenuCb);
    }

    openMenuCb() {
        ClientFilterComponent.instance.isUnfold = false;
        if (ClientFilterComponent.instance.$clientListFilterItemPanel) {
            ClientFilterComponent.instance.$clientListFilterItemPanel.fadeOut();
            ClientFilterComponent.instance.$clientListFilterItemPanel.find('.wrapper').slideUp('fast', 'linear');
        }
    }

    transferVw(px) {
        return px / 1080 * 100 + 'vw';
    }

    sortWayInit() {
        if (this.way === ClientFilterWayModel.ClientIndividualListPage ||
            this.way === ClientFilterWayModel.ClientFilterListPage ||
            this.way === ClientFilterWayModel.ClientVipListPage || !this.way) {
            this.sortWayList = [
                {
                    name: "姓名",
                    value: "name"
                },
                {
                    name: "尊享会会员等级",
                    value: "VIP"
                },
                {
                    name: "保单数",
                    value: "totalPolicy"
                },
                {
                    name: "年缴保费",
                    value: "premium"
                }
            ];
        }
        else if (this.way === ClientFilterWayModel.ClientCompensationListPage) {
            this.sortWayList = [
                {
                    name: "姓名",
                    value: "name"
                },
                {
                    name: "尊享会会员等级",
                    value: "VIP"
                },
                {
                    name: "受理日期",
                    value: "acceptTime"
                },
                {
                    name: "申请金额",
                    value: "premium"
                }
            ];
        }
    }

    setSelectedByIndex(i: number, isEmit = true) {
        this.$clientFilterWrapper = this.$clientFilterWrapper || $(`.${this.clientFilterWrapper}`);
        this.$clientListFilterItemPanel = this.$clientListFilterItemPanel || $(`.${this.selectorClass}`);

        this.$clientListFilterItemPanel.find('.item.selected').css('color', 'rgb(51,51,51)').removeClass('selected');
        this.$clientListFilterItemPanel.find('i').remove();
        this.$clientListFilterItemPanel.find('.item').eq(i).css('color', 'rgb(56,172,99)').addClass('selected');
        this.$clientListFilterItemPanel.find('.item').eq(i).append('<i></i>');
        this.$clientListFilterItemPanel.find('.selected i').css({
            'display': 'block',
            'width': this.transferVw(42),
            'height': this.transferVw(42),
            'float': 'right',
            'background-image': 'url(./assets/images/client/client-filter/icon_checked.png)',
            'background-size': '100% 100%',
            'position': 'relative',
            'top': '3.1vw'
        });

        if (this.currentOption.value !== this.sortWayList[i].value && isEmit) {
            this.selectChanged.emit(this.sortWayList[i]);
        }

        this.currentOption = this.sortWayList[i];
    }

    showPanel() {
        this.$clientFilterWrapper = this.$clientFilterWrapper || $(`.${this.clientFilterWrapper}`);

        this.$clientListFilterItemPanel = $(`.${this.selectorClass}`);
        if (this.$clientListFilterItemPanel && this.$clientListFilterItemPanel.length) {
            this.$clientListFilterItemPanel.remove();
        }

        const sortWayPanelStyle = {
            width: '100%',
            height: '100%',
            position: 'absolute',
            top: '13.6vw',
            left: 0,
            'background-color': 'rgba(0,0,0,0.4)',
            'z-index': '1',
            '-webkit-overflow-scrolling': 'auto'
        };
        const sortWayItemStyle = {
            'width': '100%',
            'height': this.transferVw(110),
            'line-height': this.transferVw(110),
            'padding': `0 ${this.transferVw(60)}`,
            'font-size': this.transferVw(42),
            'background-color': '#fff',
            'color': '#333333',
            'border-bottom': this.transferVw(1) + ' solid #dcdcdc'
        };
        const optionTitleStyle = {
            'width': '100%',
            'height': this.transferVw(90),
            'line-height': this.transferVw(90),
            'text-align': 'center',
            'font-size': this.transferVw(36),
            'background-color': '#eeeeee',
            'color': '#999999',
            'border-top': this.transferVw(3) + ' solid #35ac63'
        };

        const checkedIconStyle = {
            'display': 'block',
            'width': this.transferVw(42),
            'height': this.transferVw(42),
            'float': 'right',
            'background-image': 'url(./assets/images/client/client-filter/icon_checked.png)',
            'background-size': '100% 100%',
            'position': 'relative',
            'top': '3.1vw'
        };

        const itemPanelItemsH = [];
        itemPanelItemsH.push('<div class="' + this.selectorClass + '"><div class="wrapper">');

        this.sortWayList.forEach((way, i) => {
            let selected = 'selected';
            itemPanelItemsH.push('<div class="item ' + (i === 0 ? selected : "") + '">');
            itemPanelItemsH.push(way.name);
            if (i === 0) {
                itemPanelItemsH.push('<i></i>')
            }
            itemPanelItemsH.push('</div>');
        });

        itemPanelItemsH.push('</div></div>');
        $('body').append(itemPanelItemsH.join(''));
        this.$clientListFilterItemPanel = $('.' + this.selectorClass);

        const optionTitle = $('<div>请选择排序方式</div>');
        optionTitle.css(optionTitleStyle);
        this.$clientListFilterItemPanel.find('.wrapper').prepend(optionTitle);

        this.$clientListFilterItemPanel.css(sortWayPanelStyle);
        this.$clientListFilterItemPanel.find('.item').css(sortWayItemStyle);
        this.$clientListFilterItemPanel.find('.item i').css(checkedIconStyle);
        this.$clientListFilterItemPanel.find('.wrapper').hide();
        this.$clientListFilterItemPanel.hide();
        this.$clientListFilterItemPanel.find('.item.selected').css('color', '#35ac63');
        this.$clientListFilterItemPanel.bind('click', e => this.backClicked.call(this, e));

        let oSet = this.$clientFilterWrapper.offset();
        let oHeight = this.$clientFilterWrapper.height();

        this.$clientListFilterItemPanel.css({
            left: `${oSet.left}px`,
            top: `${oSet.top + oHeight}px`,
        });
        this.$clientListFilterItemPanel.fadeIn();
        this.$clientListFilterItemPanel.find('.wrapper').slideDown('fast', 'linear');
        if (this.selectedIndex > -1) {
            this.setSelectedByIndex(this.selectedIndex, false);
        }
    }

    scrollOffOn(enable) {
        if (enable) {
            $('.scroll-content').css('overflow-y', 'auto');
        } else {
            $('.scroll-content').css('overflow-y', 'hidden');
        }

    }

    sortWayClick() {
        this.isUnfold = !this.isUnfold;
        if (this.isUnfold) {
            this.showPanel();
        } else {
            this.$clientListFilterItemPanel.fadeOut();
            this.$clientListFilterItemPanel.find('.wrapper').slideUp('fast', 'linear');
        }
    }

    backClicked(e) {
        let i = this.$clientListFilterItemPanel.find('.item').index(e.target);
        if (i > -1) {
            this.selectedIndex = i;
            this.setSelectedByIndex(i);
        }
        this.isUnfold = false;

        this.$clientListFilterItemPanel.fadeOut();
        this.$clientListFilterItemPanel.find('.wrapper').slideUp('fast', 'linear');
    }

    closeMenChoose() {
        this.isUnfold = false;
        if (this.$clientListFilterItemPanel) {
            this.$clientListFilterItemPanel.fadeOut();
            this.$clientListFilterItemPanel.find('.wrapper').slideUp('fast', 'linear');
        }
    }

    /**
     * 输入框键盘事件
     * @param e
     */
    inputKeyUp(e) {
        if ('Enter' === e.key || 13 === e.keyCode) {
            this.searched.emit(this.searchKeyword);
        }
    }

    searchHandle(ev) {
        ev.preventDefault();
        ev.stopPropagation();
        this.inputKeyUp({key: 'Enter'});
    }

}
